<template>
	<div class="app-container">
		<div class="mask" @click="isDepTreeShow = false" v-show="isDepTreeShow"></div>
		<el-row class='content-container'>
			<div class="left">
				<company @choseCompany="choseCompany"></company>
			</div>
			<div class="left">
			
				<el-input v-model="reqData.userName" placeholder="请输入学员名称" style="width:200px" @keyup.enter.native="search"></el-input>
				<div class="posit-contont">
					<el-input style="width: 200px;" v-model="reqData.deptName" :readonly="true" placeholder="部门" @focus="isDepTreeShow = true" @keyup.enter.native="serch">
					</el-input>
					<el-tree class="posit-tree" :highlight-current="true" @node-click="serchDept" ref="tree" :data="deptList" node-key="id" :props="defaultProps" v-show="isDepTreeShow">
					</el-tree>
				</div>
				<el-button type="primary" @click="search">搜索</el-button>
			</div>
		</el-row>
		<el-table
	      :data="userArray"
	      border
	      style="width: 100%">
	      <el-table-column
	        prop="userId"
	        label="ID"
	        width="80">
	      </el-table-column>
	      <el-table-column
	        prop="userName"
	        label="姓名">
	      </el-table-column>
		  <el-table-column
	        prop="mobile"
	        label="手机号">
	      </el-table-column>
	      <el-table-column
	        prop="deptName"
	        label="部门">
	      </el-table-column>
	       <el-table-column
	        prop="courseNum"
	        label="学习课程数">
	      </el-table-column>
          <el-table-column
	        prop="finishNum"
	        label="完成课程数">
	      </el-table-column>
		   <el-table-column
	        label="完成比例">
	         <template slot-scope="scope">
	        	  <el-progress :percentage="parseInt(scope.row.finishNum/scope.row.courseNum*100)"></el-progress>
	      	</template>
	      </el-table-column>
		  
	       <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="lookDetail(scope.row)">查看详情</el-button>
            </template>
            </el-table-column>
	    
	     
	    </el-table>
		<el-row>
			<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-page="reqData.currentPage" :page-count="totalPageSize" :page-sizes="[10, 20, 30, 50]" :page-size="reqData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	import { getDeptList } from '@/api/student'
	import {getComanyId} from '@/utils/auth'
	import company from '../../components/common/company'
	import { getUserStudyStatistics } from '@/api/statistics'
	export default {
		name: 'user',
		components: { company},
		data() {
			return{
				 userArray: [],
				 reqData: {
					 courseId:"",
					 pageSize:10,
					currentPage: 1,
					userName:"",
					companyId:"",
					deptName:"",
					deptId:""
					
				},
				totalPageSize: 0,
				totalResultSize: 0,
				positName:"",
				isDepTreeShow: false, //控制部门tree树显示或隐藏
				defaultProps: {
					label: "name",
					children: "children",
				},
				deptList:[],

			}
		},
		created() {
			let query = this.$route.query;
			this.reqData.courseId = query.courseId;
			this.reqData.companyId = getComanyId();
			this.getList(this.reqData.companyId);
			this.studyStatistics(this.reqData);
		},
		methods: {
			studyStatistics(data) {
				getUserStudyStatistics(data).then((res) => {
					let entity = res.entity;
					this.userArray = entity.data;			
					this.totalPageSize = entity.page.totalPageSize;
					this.totalResultSize = entity.page.totalResultSize;
					
				})
			},
			getList(id) {
				let that = this;
				getDeptList(id).then((res) => {
					that.deptList = [...res.entity];
					that.deptList.unshift({name:"全部",id:0});
				})
			},
			search(){
				this.reqData.currentPage = 1;
				this.studyStatistics(this.reqData);	
			},
			choseCompany(data){
				this.reqData.companyId = data;
			},
			handleSizeChange(val) {
				this.reqData["pageSize"] = val;
			 	this.reqData.currentPage = 1;
			 	this.studyStatistics(this.reqData);
			},
			handleCurrentChange(val){
				this.reqData.currentPage = val; 
		    	this.studyStatistics(this.reqData);	
			},
			serchDept(data, node) { //选择岗位
				this.$forceUpdate();
				this.$set(this.reqData, "deptName", data.name);
				this.$set(this.reqData, "deptId", data.id);
				if(data.id == 0){
					this.reqData.deptName = "";
					this.reqData.deptId = "";
				}
				this.isDepTreeShow = false;
            },
            lookDetail(row){
                 this.$router.push({
                    path:"/userStudy/studentCourse",
                    query:{
                        userId:row.userId
                    }
                })

            }
              
		}
	}
</script>

<style scoped>

	.mask {
		width: 100%;
		min-height: 100%;
		z-index: 10;
		position: fixed;
		top: 0;
	}
	
	.posit-contont {
		position: relative;
		display: inline-block;
	}
	
	.posit-tree {
		position: absolute;
		right: 0;
		top: 40px;
		background: #fff;
		border: 1px solid #dfe6ec;
		z-index: 100;
		width: 200px;
		height: 350px;
		overflow-y: auto;
	}

	.el-tree {
		height: 500px;
		overflow-y: auto;
		border: 1px solid #dfe6ec;
		border-top: none;
	}

	
</style>